<template>
	<view class="money-detail">
		<scroll-view class="top-tabs-view" :class="(isMember == 'yes'||isHaveMember=='1')?'tabs-view-other':''"
		v-if="tabs.length>0"
		scroll-x="true" :scroll-left="scrollLeft">
			<block v-for="(tab,index) in tabs" :key="index">
				<view class="tabs-item-wrap" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
					<view class="tabs-item">
						<view class="tabs-item-txt" :class="[currentTab==index ? 'theme-color' : '']">{{tab.name}}</view>
						<view class="tabs-item-bottom" :class="[currentTab==index ? 'theme-color' : '']"></view>
					</view>
				</view>
			</block>
		</scroll-view>
		<mescroll-uni top="90"
		ref="mescrollRef" @up="getAllDetail" @init="mescrollInit" :up="upOption"
		@down="downCallback">
			<template v-if="type==='1'||type==='2'||((isMember == 'yes'||isHaveMember=='1')&&type==='3')">
				<view v-for="(item,index) in list" :key="index" class="record-item">
						<view class="record-left">
							<i class="iconfont"
							:class="item.sort=='0'?'iconzhichu zhichu-color':'iconshouru shouru-color'"></i>
						</view>
						<view class="record-center">
							<view class="record-order">
								<text v-if="item.sort=='0'">提成编号：{{item.userWithdrawId}}</text>
								<text v-else>订单编号：{{item.orderId}}</text>
							</view>
							<template v-if="item.sort=='1'">
								<view class="record-order">订单金额：{{item.realAmount}}</view>
								<view class="record-order">微信昵称：{{item.nickName}}</view>
							</template>
							<view class="record-date">
								<template v-if="item.sort=='0'">{{item.withdrawDate}}</template>
								<template v-else>订单日期：{{item.createTime}}</template>
							</view>
						</view>
						<view class="record-right">
							<template v-if="item.sort=='0'">
								<view class="record-status">
									<text>提现状态：</text>
									<template v-if="item.withdrawStatus==0">申请中</template>
									<template v-if="item.withdrawStatus==10">审批成功</template>
									<template v-if="item.withdrawStatus==20">驳回</template>
									<template v-if="item.withdrawStatus==30">完成</template>
								</view>
								<view class="record-amount">-￥{{item.withdrawAmount}}</view>
							</template>
							<template v-else>
								<view class="record-status">
									<text>结算状态：</text>
									<!-- ||item.=='90' -->
									<template v-if="item.rebateFlag=='1'||item.orderStatus=='90'">已结算</template>
									<template v-else>未结算</template>
									<template v-if="item.rebateFlag=='0'&&item.customerServiceStatusFlag=='1'">
										<view>售后申请中</view>
									</template>
								</view>
								<view class="record-amount">+提成：￥{{item.agencyFee}}</view>
							</template>
						</view>
				</view>
			</template>
			<template v-else>
				<view v-for="(item,index) in list" :key="index" class="record-item">
					<view class="record-left">
						<i class="iconfont iconzhichu zhichu-color"></i>
					</view>
					<view class="record-center">
						<view class="record-order">提成编号：{{item.userWithdrawId}}</view>
						<view class="record-date">日期：{{item.withdrawDate}}</view>
					</view>
					<view class="record-right">
						<view class="record-status">
							<text>提现状态：</text>
							<template v-if="item.withdrawStatus==0">申请中</template>
							<template v-if="item.withdrawStatus==10">审批成功</template>
							<template v-if="item.withdrawStatus==20">驳回</template>
							<template v-if="item.withdrawStatus==30">完成</template>
						</view>
						<view class="record-amount">-￥{{item.withdrawAmount}}</view>
					</view>
				</view>
			</template>
			<!-- <view class="safe-area"></view> -->
		</mescroll-uni>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import tuiButton from "@/components/button/button"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [ MescrollMixin],
		components: {
			tuiButton,
			
		},
		data() {
			return {
				scrollLeft: 0,
				currentTab: 0,//当前tab
				scrollTop: 0,
				showflg:false,
				tabs: [],
				showLoadMore: false,
				showLoadFlg: false,
				
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, 
				},
				type:'1',//默认显示全部
				list:[],
				customerUserId:'',
				height:0,
				isHaveMember:uni.getStorageSync('isHaveMember'),
				isMember:'',
			};
		},
	
		onLoad(options){
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			//有会员并且经销商及以上
			if (uni.getStorageSync('orgLv') !== 'gk'&&uni.getStorageSync('orgLv') !== 'hy'&&uni.getStorageSync('orgLv') !== 'dxy') { //不用true,false,防止界面闪现
				this.isMember = 'yes'
			} else {
				this.isMember = 'no'
			}
			if(this.isMember == 'yes'||this.isHaveMember=='1'){//有会员
				this.tabs= [{
					name: "全部"
				}, {
					name: "提成获取"
				}, {
					name: "会员提成"
				}, {
					name: "提成支出"
				}];
			}else{//无会员
				 this.tabs= [{
					name: "全部"
				 }, {
					name: "提成获取"
				 }, {
					name: "提成支出"
				 }];
			}
			
			this.customerUserId=options.customerUserId;
			uni.getSystemInfo({
				success: (res) => {
					this.height = 750 / uni.upx2px(750)*(res.windowHeight - uni.upx2px(90))
				}
			});
			
		},
		methods: {
			getAllDetail(page){
				if(this.type==='1'||this.type==='2'||((this.isMember == 'yes'||this.isHaveMember=='1')&&this.type==='3')){
					const params = {
						type:this.type,
						current: page.num,
						pageSize: page.size,
						customerUserId:'',
						agencyFeeType:''
					};
					this.$http.allCommission(params).then((res) => {
						if(res.status === 0) {
							let curPageData = res.data.records;
							this.mescroll.endSuccess(res.data.records.length);
							if (page.num == 1) {
								this.list= []
							};
							this.list = this.list.concat(curPageData);
						}
					}).catch(()=>{
					//联网失败, 结束加载
						this.mescroll.endErr();
					})
				}else{
					this.withdrawDetail(page);
				}
				
			},
			withdrawDetail(page){//提现
				const params = {
					current: page.num,
					pageSize: page.size,
				};
				this.$http.withdrawDetail(params).then((res) => {
					if(res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.list= []
						};
						this.list = this.list.concat(curPageData);
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			swichMenu: async function(current) { //点击其中一个 tab
				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;
					this.type=String(current+1);
					this.list = []// 先置空列表,显示加载进度
					this.mescroll.resetUpScroll(); // 再刷新列表数据
				}
			},
			
		},
		onPageScroll(e) {
			// console.log(e.scrollTop)
			this.scrollTop = e.scrollTop
		}
	}
</script>

<style lang="scss">
	.money-detail {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		// .safe-area{
		// 	height: 1rpx;
		// 	padding-bottom: constant(safe-area-inset-bottom);
		// 	padding-bottom: env(safe-area-inset-bottom);
		// }
	}

	.top-tabs-view {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		box-shadow: 0 0 4rpx #FFFFFF;
		white-space: nowrap;
		height: 90rpx;
		position: fixed;
		left: 0;
		top: --window-top; /* css变量 */
		z-index: 888;
		border-top:2rpx solid $borderColor;
		box-shadow: 0 0 4rpx $borderColor;
		border-top:1rpx solid $borderColor;
		.tabs-item-wrap {
			display: inline-block;
			white-space: nowrap;
			height: 90rpx;
			width: 33.3%;

			.tabs-item {
				margin-left: 35rpx;
				margin-right: 30rpx;
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.tabs-item-txt {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					font-weight: 400;
					// color: #333333;
					&.theme-color{
						color: $themeColor1;
					}
				}
				.tabs-item-bottom {
					width: 130rpx;
					height: 6rpx;
					position: absolute;
					bottom: 0rpx;
					left: calc(50% - 65rpx);
					&.theme-color{
						background-color: $themeColor1;
					}
				}
			}
		}
		&.tabs-view-other{
			.tabs-item-wrap {
				width: 25%;
			}
		}
	}
	
		.record-item{
			padding:14rpx 20rpx;
			width: 100%;
			display: flex;
			align-items: center;
			margin-top:16rpx;
			background-color: #fff;
			min-height: 140rpx;
			position: relative;
			.record-left{
				width:56rpx;
				height:56rpx;
				line-height:56rpx;
				text-align: center;
				border:2rpx solid $borderColor;
				border-radius: 50%;
				margin-right: 8rpx;
				i{
					font-size: 40rpx;
				}
				i.zhichu-color{
					color:$red;
				}
				i.shouru-color{
					color:#4db2a4;
				}
			}
			.record-center{
				flex:1;
				line-height: 44rpx;
				font-size: 24rpx;
				.record-order{
					color:#121212;
				}
				.record-date{
					color:#aaa;
				}
				
			}
			.record-right{
				font-size: 26rpx;
				
				
				.record-status{
					width:240rpx;
					text-align: right;
					position: absolute;
					right: 20rpx;
					top:16rpx;
					color: $red;
				}
				.record-amount{
					position: absolute;
					right: 20rpx;
					bottom:16rpx;
					text-align: right;
				}
			}
			
		}
</style>
